<template>
    <div>
        <div style="margin-bottom: 20px">
            <el-input style="width:240px" placeholder="请输入名称" v-model="params.name"></el-input>
            <el-input style="width:240px ;margin-left: 5px" placeholder="请输入标准码" v-model="params.bookNo"></el-input>
            <el-button style="margin-left: 5px " type="primary" @click="load"><i class="el-icon-search"></i>搜索</el-button>
            <el-button style="margin-left: 5px " type="warning" @click="reset"><i class="el-icon-refresh"></i>重置</el-button>
        </div>
        <el-table :data="tableData" stripe>
            <el-table-column prop="id" label="id"></el-table-column>
            <el-table-column prop="name" label="名称"></el-table-column>
            <el-table-column prop="description" label="描述"></el-table-column>
            <el-table-column prop="publishDate" label="出版日期"></el-table-column>
            <el-table-column prop="author" label="作者"></el-table-column>
            <el-table-column prop="publisher" label="出版社"></el-table-column>
            <el-table-column prop="category" label="分类"></el-table-column>
            <el-table-column prop="bookNo" label="标准码"></el-table-column>
            <el-table-column prop="cover"  label="封面">
                <template v-slot="scope">
                    <el-image :src="scope.row.cover" :preview-src-list="scope.row.cover"></el-image>
                </template>
            </el-table-column>
            <el-table-column prop="createtime" label="创建时间"></el-table-column>
            <el-table-column prop="updatetime" label="更新时间"></el-table-column>

            <el-table-column label="操作">
                <template v-slot="scope">
                    <!--scope就是当前行的数据-->     <!--点击跳转到这个路由，带上ID-->
                    <el-button type="primary"  @click="$router.push('/EditBook?id=' +scope.row.id)">编辑</el-button>
                    <el-popconfirm
                            style="margin-left: 5px"
                            title="确认删除这行数据吗？"
                            @confirm="del(scope.row.id)"
                    >
                        <el-button  type="danger" slot="reference">删除</el-button>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
    import request from "@/util/request";
    export default {
        name: "Book",
        data(){
        return{
            tableData:[],
            total: 0,
            params:{
                pageNum:1,
                pageSize:10,
                name:"",
                bookNo:""
            },

        }
        },
        created() {
            this.load()
        },
        methods:{
            load(){
                request.get("/book/page",{params:this.params}).then(res=>{
                    if (res.code=="200"){
                        this.tableData=res.data.list
                        this.total=res.data.total
                    }
                })
            },
            reset(){
              this.params={
                  pageNum:1,
                  pageSize:10,
                  name:"",
                  bookNo:""
              }
            },
            del(id){
                request.delete("/book/"+id).then(res=>{
                    if (res.code=="200"){
                        this.$notify.success("删除成功")
                    }else{
                        this.$notify.error("删除失败")
                    }
                })
            }
        }
    }
</script>

<style scoped>

</style>
